@charset "utf-8";
@import 'common/reset';
@import 'common/iconfont';
@import 'common/function';
//共用类
.icon-gouwuche{
    font-size: 16px;
}
.icon-geren01{
    font-size: 18px;
}
.imgFix{
    @include imgFix(48px,55px);
    margin:7px 0 11px 21px;
}

//白点

.btn{
    @include btn(83px,20px,black);
    font-size: 12px;
    display: inline-block;
    text-align: center;
    border-radius: 20px;
    line-height: 20px;
    padding: 0 12px 0 7px;
    box-sizing: border-box;
   div{
       display: inline-block;
        vertical-align: text-bottom;
        width: 12px;
        height: 12px;
        padding-right: 6px;
        border-radius: 50%;
        position: relative;
        box-sizing: border-box;
        top:-1px;
        overflow: hidden;
        img{
            position: absolute;
            top: -99px;
            right: -99px;
            bottom: -99px;
            left: -99px;
            margin: auto;
            width: 100%;
        }
    }
}
//头部样式
header{
    border-bottom:1px solid #dfdfdf;
    font-size: 0;
    position: relative;
    min-width: 1200px;
    a{
        color:$aColor1;
        &:hover{
            color:$aHover;
        }
    }
    .wrap{
        @include wrap(985px);
        position: absolute;
        right: 0;
        div{
            font-size: 14px;
        }
//      background: skyblue;
    }
    div{
        vertical-align: top;
         display:inline-block;
        >ul{
             display:inline-block;
           >li{
               font-size: 12px;
               display:inline-block;
               margin-left: 35px;
               height:73px;
               line-height:73px;
           } 
        }
        .search{
              margin-left: 69px;
              padding:21px 29px 24px 0;
              border-right: 1px solid #dfdfdf;
              height: 100%;
            .input_wrap{
                height: 28px;
                width: 192px;
                border:1px solid #dcdee0;
                border-radius: 13px;
                position: relative;
                padding:5px 10px;
                box-sizing: border-box;
            }
            input{
                height: 80%;
                width: 80%;
                border: none;
            }
            button{
                @include btn(28px,28px);
                border-radius: 50%;
                position: absolute;
                right: -1px;
                top:-1px;
                 outline: none;
                &active{
                    outline: none;
                }
            }
        }
        .shop-cart,.personal,.tel{
            width: 73px;
            height:73px;
            border-right:1px solid #dfdfdf;
            text-align: center;
            line-height: 73px;
        }
        .tel{
            width: 82px;
            font-size: 12px;
            span{
                line-height: 12px;
            }
        }
        .lang{
            text-align: center;
            div{
                display: inline-block;
                text-align: center;
                border:1px solid #dfdfdf;
                padding:5px 3px 5px 1px;
                margin: 22px 0 24px 12px;
            }
        }
    }
}

.personal{
    position:relative;
    &:hover{
        >ul{
            transform: translateY(0%);
            opacity: 2;
        }
    }
    >ul{
        display: initial;
        position: absolute;
        z-index: 999;
        background: white;
        top:74px;
        left: 0;
        height: auto;  
        transform: translateY(-50%);
        opacity: 0;
        transition: all 300ms;
        border:1px solid $borderColor;
        width: 200%;
        >li{
            width: 100%;
            margin: 0;
            line-height: normal;
            height: 30px;
        }
    }
}
//脚部样式
footer{
    width:100%;
    min-width: 1200px;
    background:$footerBg;
    padding-top:50px;
    padding-bottom:30px;
    .wrap{
        width:658px;
        margin: 0 auto;
        font-size: 0;
        display: flex;
        div{
            display: inline-block;
        }
        div:first-child{
            width:170px;
            a{
                display: inline-block;
                height: 35px;
                width: 86px;
                background: url(../img/logo2.jpg) no-repeat 100% ;
                overflow: hidden;
                margin-left: 39px;
                margin-right: 46px;
            }
        }
        div:nth-child(2){
            display:flex;
            border-left:1px solid #f07471 ;
            margin-top: 2px;
            margin-bottom:64px;
            flex-shrink: 0;
            ul{
                vertical-align: top;
                margin-left: 55px;
                color: white;
                >li{
                   font-size: 12px; 
                   vertical-align: text-bottom;
                   line-height: 24px;
                   position: relative;
                   a{
                       color: $aColor2;
                       position: relative;
                       top:2px;
                   }
                }
            }
        }
    }
    .copyRight{
        text-align: center;
        font-size: 12px;
        transform: scale(0.8);
        color: white;
    }
}
@keyframes turn{
    50%{
        transform: rotate(180deg);
    }
    100%{
         transform: rotate(360deg);
    }
}